<template>
	<view class="l_pages list">
		<jnavbar :title="'个人信息'"></jnavbar>
		<!-- <view class="list"> -->
		<u-cell-group class="item" title="基本信息" :title-style="titleStyle">
			<u-cell-item title="头像" :arrow="false" @click="chooseAvatar">
				<view slot="right-icon" class="img-box">
					<vimage  :src="UserInfo.picurl"></vimage>
				</view>
				</u-cell-item>
			<u-cell-item @click="changename" title="昵称" :value="UserInfo.nickname"></u-cell-item>
			<u-cell-item @click="tobindphone" title="手机号" :value="UserInfo.mobile || ''"></u-cell-item>
		</u-cell-group>
		<u-cell-group class="item" title="绑定账号" :title-style="titleStyle" v-if="mallBaseinfo && !mallBaseinfo.is_reviewed">
			<u-cell-item hover-class="none" :arrow="false" v-for="(item, i) in cardlist" :title="item.name" :value="item.resource.card">
				<u-icon style="margin-right: 5rpx;" v-if="item.resource.type == 1" slot="icon" name="weixin-fill" color="#19be6b" size="40"></u-icon>
				<u-icon style="margin-right: 5rpx;" v-if="item.resource.type == 2" slot="icon" name="zhifubao-circle-fill" color="#2979ff" size="40"></u-icon>
				<u-icon style="margin-left: 10rpx;" @click="removecard(item.id)" slot="right-icon" name="close" size="20"></u-icon>
			</u-cell-item>
			<u-cell-item @click="tobindcard"><text slot="right-icon">绑定账号</text></u-cell-item>
		</u-cell-group>
		<!-- </view>	 -->
		<view class="btns" @click="canlogin"><text>退出登录</text></view>
		<u-popup ref="popup" v-model="showPopupBottom" :mode="popType" >
			<view class="form_div">
				<!-- <view class=""><text>修改昵称</text></view> -->
				<u-form :model="form" ref="uForm" :border-bottom="false">
					<u-form-item label="昵称" :border-bottom="false"><u-input :clearable="false" placeholder="输入用户名" v-model="form.nickname" /></u-form-item>
					<u-button type="primary" @click.stop="upUser">确认</u-button>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import base from '@/common/baseUrl.js';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			showPopupBottom: false,
			//底层模态框
			popType: 'center',
			titleStyle: {
				'font-size': '36rpx',
				color: '#333',
				'font-weight': 'bold',
				padding: '20rpx 10rpx'
			},
			cardlist: [],
			form: {
				nickname: ''
			}
		};
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo,
			mallBaseinfo: state => state.mallBaseinfo
		})
	},
	onLoad() {},
	onShow() {
		this.getcardlist();
	},
	mounted() {
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			// this.UserInfo.picurl=path
			// 可以在此上传到服务端
			var token = uni.getStorageSync('token') || null;
			var mall_id = uni.getStorageSync('mall_id') || null;
			let UserType = 3;
			// #ifdef MP-WEIXIN
			UserType = 1;
			// #endif
			// #ifndef MP-WEIXIN
			if (util.getBrowser() == '微信') {
				UserType = 2;
			}
			// #endif
			uni.uploadFile({
				url: base.baseUrl + '/index/order/imgUpdate',
				filePath: path,
				name: 'image', //这里根据自己的实际情况改
				header: {
					Authorization: token,
					mid: mall_id,
					UserType: UserType,
					source: 1
				},
				complete: res => {
					let data = JSON.parse(res.data);
					this.UserInfo.picurl = util.getimgurl(data.msg[0]);
				}
			});
		});
	},
	methods: {
		changename() {
			this.form.nickname = this.UserInfo.nickname;
			this.showPopupBottom = true;
		},
		upUser() {
			let data = {
				id: this.UserInfo.id,
				nickname: this.form.nickname
			};
			this.$http('/user/upUser', data, 'post').then(res => {
				if (res.statusCode == 200) {
					let UserInfo = this.UserInfo;
					UserInfo.nickname = this.form.nickname;
					this.$store.commit('setUserInfo', UserInfo);
					this.showPopupBottom = false;
				}
			});
		},
		removecard(id) {
			const _this = this;
			uni.showModal({
				title: '是否确认删除？',
				success(res) {
					if (res.confirm) {
						_this.$http('/user/card/' + id, {}, 'DELETE').then(res => {
							_this.getcardlist();
						});
					}
				}
			});
		},
		getcardlist() {
			let data = {};
			this.$http('/user/card/list?page=1&size=100', data, 'POST').then(res => {
				let list = res.data.msg.data;
				this.cardlist = list;
			});
		},
	
		tobindcard() {
			this.Jumpurl({
				type: 1,
				login_type: 2,
				link: '../mine/card/card'
			});
		},
		tobindphone() {
			this.Jumpurl({
				type: 1,
				link: '../mine/bindmobile/bindmobile?id=' + this.UserInfo.id,
				login_type: 2
			});
		},
		chooseAvatar() {
			// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			this.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: 'pages/u-avatar-cropper/u-avatar-cropper',
				// 内部已设置以下默认参数值，可不传这些参数
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg'
				}
			});
		},
		canlogin() {
			try {
				this.$store.commit('settoken', null);
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
				this.$store.commit('setUserInfo', {});
				// #ifdef H5
				document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
				// #endif

				uni.navigateBack();
			} catch (e) {
				// error
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	width: 702rpx;
	margin-left: 24rpx;
	.item {
		background: #fff;
		padding: 0rpx 20rpx;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		.img-box {
			width: 80rpx;
			height: 80rpx;
			background: #000000;
			border-radius: 50%;
			overflow: hidden;
		}
	}
}

.btns {
	position: fixed;
	width: 686rpx;
	height: 80rpx;
	background: #fff;
	border-radius: 40rpx;
	bottom: 30rpx;
	left: 32rpx;
	text-align: center;
	line-height: 80rpx;
}
.form_div {
	background: #ffffff;
	padding: 20rpx;
	width: 600rpx;
	border-radius: 12rpx;
}
</style>
